<template>
  <div class="container" ref="container">
    <div class="content-list">
      <div class="cleft">
        <el-row class="tac">
          <el-col :span="12" style="width: 100%; height: 100%">
            <el-menu
              router
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              style="width: 100%; height: 100%"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>单选题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="/radioitem"
                    :route="{ path: '/teacher/find/radioitem' }"
                    >题目1</el-menu-item
                  >
                  <el-menu-item
                    index="/radioitem"
                    :route="{ path: '/teacher/find/radioitem' }"
                    >题目2</el-menu-item
                  >
                  <el-menu-item
                    index="/radioitem"
                    :route="{ path: '/teacher/find/radioitem' }"
                    >题目3</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>多选题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="/checkbox"
                    :route="{ path: '/teacher/find/checkbox' }"
                    >题目1</el-menu-item
                  >
                  <el-menu-item
                    index="/checkbox"
                    :route="{ path: '/teacher/find/checkbox' }"
                    >题目2</el-menu-item
                  >
                  <el-menu-item
                    index="/checkbox"
                    :route="{ path: '/teacher/find/checkbox' }"
                    >题目3</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>判断题(每题5分)</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    index="/TFitem"
                    :route="{ path: '/teacher/find/TFitem' }"
                    >题目1</el-menu-item
                  >
                  <el-menu-item
                    index="/TFitem"
                    :route="{ path: '/teacher/find/TFitem' }"
                    >题目2</el-menu-item
                  >
                  <el-menu-item
                    index="/TFitem"
                    :route="{ path: '/teacher/find/TFitem' }"
                    >题目3</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="cright">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
  <style scoped lang="less">
.container {
  width: 100%;
  height: 1000px;
  background-color: #f0f2f5;
  .nav {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    .left {
      width: 300px;
    }
  }
}

.content-list {
  width: 100%;
  height: 90%;
  display: flex;
  box-sizing: border-box;
  .cleft {
    width: 15%;
    height: 90%;
    background-color: #fff;
  }
  .cright {
    width: 80%;
    height: 90%;
    background-color: #fff;
    margin: 30px;
    padding: 10px;
    padding-left: 30px;
    box-sizing: border-box;
  }
}
.el-header {
  width: 100%;
  box-sizing: border-box;
  background-color: rgb(0, 21, 41);
  color: rgb(166, 173, 180);
  text-align: center;
  line-height: 75px;
  display: fixed;
  top: 0;
  left: 0;
}
</style>